<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/view/include/taglibs.jspf"%>
<%--
  ~ Copyright (c) 2005, 2014 vacoor
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  --%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/css/base.css"/>
    <link rel="stylesheet" href="/css/shop.css"/>
    <!--http://www.lanrenzhijia.com/nav/2565.html-->
    <!-- http://demo.lanrenzhijia.com/demo/2013/0105/nav/-->
    <!-- http://www.lanrenzhijia.com/nav/1966.html -->
    <script src="/js/lib/jquery-1.7.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        .cat-menu .menu-tit, .cat-menu .menu-p, .cat-menu .menu-p .menu-i {
            /*background: url("/img/menu-bg.png") no-repeat;*/
        }

        .cat-menu {
            width: 230px;
            margin-bottom: 10px;
            border-top: 2px solid #d7c09a;
            border-left: 1px solid #e1e1e1;
            border-right: 1px solid #e1e1e1;
            width: 203px;
            border-top: 2px solid #c40000;
        }

        .menu-tit {
            padding-left: 32px;
            line-height: 35px;
            cursor: pointer;
            border-bottom: 1px solid #e1e1e1;
            font-size: 14px;
            font-family: "微软雅黑";
            background-color: #f8f8f8;
        }

        .menu ul {
            padding: 13px 0 13px 23px;
            border-bottom: 1px solid #e1e1e1;
            background-color: #fff;
            display: none;
        }

        .menu ul li {
            width: 170px;
            line-height: 24px;
            padding-left: 12px;
            /*background: url(../images/add-icon001.jpg) no-repeat 0 8px;*/
        }

        .menu.expand ul {
            display: block;
        }
    </style>
</head>
<body>
<div class="sidebar">
    <div class="cat-menu">
        <c:if test="${pCats != null}">
            <c:forEach var="field" varStatus="st" items="${pCats}">
                <c:set var="field" value="${field.value}" />
                <div class="menu ${st.first ? 'expand': empty param.cat ? 'expand' : ''}">
                    <%--<h3 class="menu-tit"><decode href="${ctx}/search?cat=${field.key}">${field.name}</decode></h3>--%>
                    <h3 class="menu-tit" data-id="${field.key}">${field.name}</h3>
                    <ul>
                        <c:forEach var="f" items="${field.values}">
                            <li><a href="${fnx:rep(paramValues, 'cat', f.key)}" title="${f.key}">${f.name}</a></li>
                        </c:forEach>
                    </ul>
                </div>
            </c:forEach>
        </c:if>
    </div>
</div>
<script type="text/javascript">
    $('.menu .menu-tit').click(function () {
        $(this).closest('.menu').toggleClass("expand");
    });
</script>
</body>
</html>
